<!DOCTYPE HTML>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="stylesheet" href="css/css.css">
    <link rel="stylesheet" href="css/style.css">
    <script type="text/javascript" src="js/fix.js"></script>
    <title>主页</title>
</head>

<body>

    <div class="head">

        <div id="rainBox" class="rain">
            <img class="rainImg" src="images/rain.gif" alt="" />
        </div>
        <div class="banner">
            <ul>
                <li><a class="nav selected" href="notes/note_index.html" target="contentIFrame" onClick="changeNavSelected(this);autoFix();">技术</a></li>
                <li><a class="nav" href="life/life_index.html" target="contentIFrame" onClick="changeNavSelected(this);autoFix();">生活</a></li>
                <li><a class="nav" href="works/work_index.html" target="contentIFrame" onClick="changeNavSelected(this);autoFix();">作品</a></li>
                <li><a class="nav" href="about.html" target="contentIFrame" onClick="changeNavSelected(this);autoFix();">关于</a></li>
            </ul>
        </div>
    </div>

    <div class="main">
        <div class="content">
            <iframe width="100%" height="100%" scrolling="no" name="contentIFrame" frameborder="0" src="notes/note_index.html" id="contentIFrame"></iframe>
        </div>
    </div>

    <div class="footer">
        <div class="rights">
            <p>程俊彰 &copy; 2010-<script>
                    document.write(new Date().getFullYear());
                </script>
            </p>
        </div>
    </div>

    <audio id="rainSound" src="bgm/rain.mp3" autoplay="autoplay" loop="loop"></audio>
</body>

</html>
<script type="text/javascript">
    (function() {
        var ifr = document.getElementById('contentIFrame');
        ifr.style.height = '0px';
        ifr.onload = function () {
            var iDoc = ifr.contentDocument;
            var height = calHeight(iDoc);
            var width = calWidth(iDoc);
            ifr.style.height = height + 'px';
            ifr.style.width = width + 'px';
        }
    })();

    document.getElementById('rainBox').addEventListener('click', function (e) {
        console.log('rainBox clicked');
        if (e && e.stopPropagation) {
            e.stopPropagation();
        } else {
            window.event.cancelBubble = true;
        }
        playPause();
        window.removeEventListener("click", clickPagePlay);
    }, true)

    function showRain() {
        document.getElementsByClassName('rainImg')[0].style.display = 'block';
    };

    function hideRain() {
        document.getElementsByClassName('rainImg')[0].style.display = 'none';
    };
    hideRain();

    var isPlaying = false;

    function clickPagePlay(e) {
        console.log('page clicked');
        // if (e && e.stopPropagation) {
        //     e.stopPropagation();
        // } else {
        //     window.event.cancelBubble = true;
        // }
        playPause();
        window.removeEventListener("click", clickPagePlay);
    }

    window.addEventListener('click', clickPagePlay, false);

    function playPause() {
        var player = document.getElementById('rainSound');
        if (isPlaying) {
            player.pause();
            isPlaying = false;
            hideRain();
        } else {
            player.play();
            isPlaying = true;
            showRain();
        }
    }
</script>